<template>
	<div class="type-bar">
		<div
			v-for="item in data"
			:key="item.questionType"
			class="item"
			:class="{active:activeType === item.questionType}"
			@click="clickItem(item)"
		>
			{{ Dictionary.get('rc_questionType')[item.questionType] }}
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			// 当前选中的类型
			activeType: {
				type: String,
				default: ""
			},
			// 类型列表
			data: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			clickItem(item) {
				this.$emit("click-item", item);
			}
		}
	};
</script>

<style lang="less" scoped>
	.type-bar {
		box-sizing: border-box;
		padding: 10px;
		margin: 12px auto;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;

		.item {
			padding: 11px 24px;
			margin: 6px;
			font-size: 14px;
			white-space: nowrap;
			line-height: 1;
			color: #535766;
			background-color: #f4f5f9;
			border-radius: 17px;
			cursor: pointer;

			&.active {
				background-color: #ff4436;
				color: #fff;
				font-weight: bold;
			}
		}
	}
</style>
